<div
  class="m-player"
  appClickOutside
  [bindFlag]="bindFlag"
  [@showHide]="playerVisible"
  (onClickOutside)="onClickOutside()"
  (mouseenter)="togglePlayerVisible('show')"
  (mouseleave)="togglePlayerVisible('hide')"
  (@showHide.start)="animating = true"
  (@showHide.done)="onAnimationDone($event)"
>
  <div class="lock" (click)="isLocked = !isLocked">
    <div class="left" [ngStyle]="{ height: '20px' }">
      <i [class.locked]="isLocked"></i>
    </div>
  </div>
  <div class="hand"></div>
  <div class="container">
    <div class="wrap">
      <div class="btns">
        <i class="prev" (click)="onPrev(currentIndex - 1)"></i>
        <i class="toggle" [class.playing]="playing" (click)="onToggle()"></i>
        <i class="next" (click)="onNext(currentIndex + 1)"></i>
      </div>
      <div class="head">
        <img [src]="picUrl" appImgDefault alt="ok" (click)="skipToInfo(['/songInfo', currentSong.id])" />
        <i class="mask"></i>
      </div>
      <div class="play">
        <div class="words clearfix">
          <p
            class="ellipsis margin-bottom-none"
            (click)="skipToInfo(['/songInfo', currentSong.id])"
          >{{currentSong?.name}}</p>
          <ul class="songs clearfix">
            <li *ngFor="let item of currentSong?.ar;last as isLast">
              <a (click)="skipToInfo(['/singer', item.id])">{{item.name}}</a>
              <span [hidden]="isLast">/</span>
            </li>
          </ul>
        </div>
        <div class="bar">
          <div class="slider-wrap">
            <app-wyy-slider
              [bufferOffset]="bufferPercent"
              [(ngModel)]="percent"
              (wyySliderChange)="onPercentChange($event)"
            ></app-wyy-slider>
          </div>
          <span class="time">
            <em>{{currentTime | formatTime}}</em> / {{duration | formatTime}}
          </span>
        </div>
      </div>
      <div class="oper">
        <i class="like" title="收藏" (click)="onLikeSong(currentSong)"></i>
        <i class="share" title="分享" (click)="onShareSong(currentSong)"></i>
      </div>
      <div class="ctrl">
        <i [ngClass]="volume ? 'volume' : 'novolume'" title="音量" (click)="togglePanel('showVolumePanel')"></i>
        <i [ngClass]="playMode.type" [title]="playMode.label" (click)="toggleMode()"></i>
        <p class="open" nzOverlayClassName="tip-bg" (click)="togglePanel('showPanel')">
          <span></span>
        </p>
        <div class="control-vol" [hidden]="!showVolumePanel">
          <app-wyy-slider
            [wyyVertical]="true"
            [(ngModel)]="volume"
            (ngModelChange)="volumeChange($event)"
          ></app-wyy-slider>
        </div>
      </div>
      <app-wyy-player-panel
        [playing]="playing"
        [songList]="songList"
        [currentSong]="currentSong"
        [show]="showPanel"
        (onClose)="showPanel = false"
        (onLikeSong)="onLikeSong($event)"
        (onShareSong)="onShareSong($event)"
        (onDeleteSong)="deleteSong($event)"
        (onClearSong)="clearSong()"
        (onChangeSong)="changeCurrentSong($event)"
        (onSkip)="skipToInfo($event)"
      ></app-wyy-player-panel>
    </div>
  </div>
  <audio
    #audio
    [src]="currentSong?.url"
    (canplay)="onPlay()"
    (timeupdate)="onTimeUpdate($event)"
    (ended)="onEnd()"
    (error)="onError()"
  ></audio>
</div>
